<template>
  <div class='yun-right-menu' v-show="visible" :style='position'>
      <div class='menu-item' @click="deleteLayer">删除图层</div>
      <div class='menu-item' @click='moveupLayer'>上移图层</div>
      <div class='menu-item' @click='movedownLayer'>下移图层</div>
  </div>
</template>

<script>
export default {
  props:{
    visible:Boolean,
    position:Object
  },
  methods:{
    deleteLayer() {
      this.$confirm("是否删除所选图层?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$emit("deletelayer");
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    moveupLayer() {
      this.$emit("moveupLayer");
    },
    movedownLayer() {
      this.$emit("movedownLayer");
    },
     closeMenu() {
      this.$emit("update:visible", false);
    },
  },
  watch: {
    visible(value) {
      if (value) {
        document.body.addEventListener("click", this.closeMenu);
      } else {
        document.body.removeEventListener("click", this.closeMenu);
      }
    }
  },
}
</script>

<style lang='less' scoped>
  .yun-right-menu{
    width:80px;
    height:auto;
    position: fixed;
    z-index: 99999;
     box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    padding: 0;
    background: #27343e;
    color: #bcc9d4;
    .menu-item {
      z-index: 10000;
      padding: 8px 12px;
      cursor: pointer;
      position: relative;
      font-size: 12px;
      cursor: pointer;
    }
  }
</style>